<template>
  <div class="dashboard-container">
    <div class="app-container">
    <el-card>
      <!-- 表单 -->
  <el-form :inline="true"
  :label-position="labelPosition"
  label-width="80px"
  :model="form"
  ref="form"
  >
    <el-row>
      <span class="tips">说明: 目前支持学科和关键字条件搜索</span>
      <el-button
        class="filter-item fr"
        size="small"
        style="margin-bottom: 10px"
        type="success"
        icon="el-icon-edit"
        @click="$router.push('/questions/new')"
        >新增试题
      </el-button>
    </el-row>
    <!-- 第一行 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="学科">
          <el-select
            v-model="subject"
            placeholder="请选择"
            style="width:300px"
          >
            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="二级目录">
          <el-select
            v-model="catalog"
            placeholder="请选择"
            style="width:300px"
          >
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签">
          <el-select v-model="tag" placeholder="请选择" style="width:300px">
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键字">
          <el-input v-model="form.keyword" placeholder="根据题干搜索" style="width:300px"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="试题类型">
          <el-select v-model="type" placeholder="请选择" style="width: 300px">
            <el-option
              v-for="item in questionType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度">
          <el-select
            v-model="difficulty"
            placeholder="请选择"
            style="width: 300px"
          >
            <el-option
              v-for="item in FormatDifficulty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向">
          <el-select
            v-model="direction"
            placeholder="请选择"
            style="width: 300px"
          >
            <el-option
              v-for="item in directions"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="录入人">
          <el-select v-model="people" placeholder="请选择" style="width: 300px">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input v-model="form.remarks" style="width: 300px"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName" style="width: 300px"></el-input>
        </el-form-item>
      </el-col>

      <!-- 城市列表 -->
      <el-col :span="6">
        <el-form-item label="城市">
          <el-select
            v-model="city"
            placeholder="请选择"
            style="width: 145px"
            @change="currentSel"
          >
            <el-option
              v-for="item in citys"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>

          <el-select
            v-model="area"
            style="width: 145px; margin-left: 10px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in areas"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" >
        <el-button type="primary" class="filter-item fr" @click="search">搜索</el-button>
        <el-button class="filter-item fr" style="margin-right: 10px" @click="clearFn">清除</el-button>
      </el-col>
    </el-row>
  </el-form>
      <QuestionsTable :subject='subject' :keyword='form.keyword' ref="questionTable"/>
    </el-card>
    </div>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { list } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import QuestionsTable from './Questions/QuestionsTable'
export default {
  components: {
    QuestionsTable
  },
  data () {
    return {
      // 表单
      form: {
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '' // 企业简称
      },
      labelPosition: 'right',
      // 学科列表
      subjects: [],
      subject: null,
      // 二级目录
      catalog: null,
      // 录入人列表
      userList: [],
      people: null,
      // 标签
      tag: null,
      // 方向
      directions: [],
      direction: null,
      // 城市列表
      citys: [],
      city: null,
      // 地区
      areas: [],
      area: '',
      // 题型
      questionType: [],
      type: '',
      // 难度
      FormatDifficulty: [],
      difficulty: null
    }
  },
  created () {
    this.hSimple()
    this.hUserList()
    this.hProvinces()
  },
  mounted () {
    this.hType()
    this.hDirection()
  },
  methods: {
    // 学科
    async hSimple () {
      const res = await simple()
      console.log(res)
      this.subjects = res.data
    },
    // 录入人
    async hUserList () {
      const res = await list()
      console.log('录入人', res)
      this.userList = res.data.list
    },
    // 城市
    hProvinces () {
      this.citys = provinces()
    },
    currentSel (val) {
      this.city = val
      this.hCitys(val)
    },
    // 地区
    hCitys () {
      console.log(this.city)
      this.areas = citys(this.city)
    },
    hType () {
      // 题型格式化
      this.questionType = questionType
      // 难度格式化
      this.FormatDifficulty = difficulty
    },
    // 点击清除
    clearFn () {
      this.subject = ''
      this.catalog = ''
      this.tag = ''
      this.people = ''
      this.direction = ''
      this.city = ''
      this.area = ''
      this.type = ''
      this.difficulty = ''
      this.form = {
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '' // 企业简称
      }
    },
    hDirection () {
      this.directions = direction
      console.log(this.directions)
    },
    // 搜索
    // 父组件可以通过ref能达到子组件里面的所有东西 可以直接触发子组件里面的方法
    search () {
      this.$refs.questionTable.questionList()
    }
  }
}
</script>

<style scoped lang='scss'>
.tips {
  font-size: 12px;
  color: pink;
}
</style>
